<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // ES5 传统的对象取值   => 依次取出对象中的每个值 赋值给变量
    var zhang = {
        name: "张三",
        age: 18,
        class: "2213",
        info: {
            height: "173cm",
            weight: "70kg",
        },
        hobby: ["sing", 'dance', 'basketball'],
        grade: {
            chinese: 55,
            math: 66,
            english: 77,
        }
    }

    // var { name, age, class: _class, info, hobby, grade } = zhang
    // console.log(name, age, _class, info, hobby, grade);

    // var { height, weight } = info;
    // console.log(height, weight);

    // var [a, b, c] = hobby;
    // console.log(a, b, c);

    // var { chinese: ch, math: mh, english: eh } = grade;
    // console.log(ch, mh, eh);

    // 注意: 如果需要对 对象的属性值进行二次解构, 对应键名解构键值
    // var { name, age, class: _class, info: { height, weight }, hobby: [a, b, c], grade: { chinese: ch, math: mh, english: eh } } = zhang
    // console.log(name, age, _class, height, weight, a, b, c, ch, mh, eh);

    var {
        name: a,
        age: b,
        class: c,
        info: {
            height: d,
            weight: e,
        },
        hobby: [f, g, h],
        grade: {
            chinese: i,
            math: j,
            english: k,
        }
    } = zhang;
    console.log(a, b, c, d, e, f, g, h, i, j, k);


    let obj = {
        p: [
            'Hello',
            { y: 'World' }
        ]
    };

    // var { p } = obj;
    // var { p: [a, b] } = obj;
    // var { p: [a, { y }] } = obj;


    const node = {
        loc: {
            start: {
                line: 1,
                column: 5
            }
        }
    };

    // var { loc } = node;
    // var { loc: { start } } = node;
    var { loc: { start: { line: a, column: b } } } = node;














</script>

</html>